<template>
  <div>
    <AppHeader></AppHeader>
    <div class="container">
      <el-form
          ref="etoak"
          :model="ruleForm"
          label-width="80p"
          :label-position="poistion">
        <el-form-item label-width="110px" size="medium" label="姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- 身份证号 校验 -->
        <el-form-item label-width="110px" size="medium" label="身份证号" prop="idNum">
          <el-input v-model="ruleForm.idnumber"></el-input>
        </el-form-item>
        <!-- 需要校验 -->
        <el-form-item label-width="110px" size="medium" label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item label-width="110px" size="medium" label="身体状况" required>
          <el-select v-model="ruleForm.value" placeholder="请选择">
            <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="110px" size="medium" label="体温">
          <el-select  v-model="ruleForm.tempereature" placeholder="请选择">
            <el-option
                v-for="item in tempreaturelist"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="110px" size="medium" label="外地住址" prop="address">
<!--          <el-input v-model="ruleForm.address"></el-input>-->
          <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
          />
        </el-form-item>
        <el-form-item label-width="110px" size="medium" label="返回时间" prop="time">
          <el-date-picker
              v-model="ruleForm.time"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary"  @click="onSubmit('etoak')">添加</el-button>
          <el-button type="danger" @click="resetForm('etoak')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import AppHeader from "@/components/AppHeader.vue";
import {addPersonalInforData} from "@/request";
import {CodeToText, regionData} from "element-china-area-data";
export default {
  components:{
    AppHeader
  },
  data(){
    return{
      ruleForm: {
          name:'',     //姓名
          idnumber:'', //身份证号
          phone:'',   //手机号码
          value:'',   //身体状况
          tempereature:'', //体温
          address:'',  //地址
          time:''  //到访时间
      },
      tempreaturelist: [
        {
          value: "正常",
          label: "36℃~37.2℃",
        },
        {
          value: "低热",
          label: "37.4℃~38℃",
        },
        {
          value: "中热",
          label: "38.1℃~39℃",
        },
        {
          value: "高热",
          label: "39.1℃~41℃",
        },
        {
          value: "超高热",
          label: ">=41℃",
        },
      ],
      options1: [
        {
          value: "正常",
          label: "正常",
        },
        {
          value: "普通感冒",
          label: "普通感冒",
        },
        {
          value: "呼吸困难腹泻",
          label: "呼吸困难腹泻",
        },
      ],
      options: regionData, //非表单数据
      selectedOptions: [],  //选择区域
    }
  },
  methods:{
    handleChange() {
      var loc = "";
      // this.ruleForm.address=CodeToText[this.selectedOptions[0]];
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]]+" ";
      }
      this.ruleForm.address=loc
      console.log("输出loc数据===》",loc)
    },
    onSubmit(){
      addPersonalInforData(this.ruleForm)
          .then((res)=>{
            console.log("输出数据：" + res.data.data)
            console.log("输出数据：" + res.data.msg)
            console.log("输出数据：" + res.data.code)
            if(res.data.code===200){
              this.$message({
                message:'外来人员数据上传成功',
                type:'success',
                showClose:true
              })
            }else{
              this.$message({
                message:'外来人员数据上传失败',
                type:'success',
                showClose:true
              })
            }
          })
          .catch((err)=>{
            this.$message({
              message:`${err}`,
              type:'error',
              showClose:true
            })
          })
      console.log("输出数据：===》",this.ruleForm)
    },
    resetForm(){
      this.ruleForm={} //重置数据
    }
  }
}
</script>
<style scoped>
.container{
  width: 500px;
  margin-top: 40px;
  margin-left: 40px;
}
.el-button{
  width: 170px;
}
</style>
<!--<template>-->
<!--  <div>-->
<!--    <AppHeader></AppHeader>-->
<!--    &lt;!&ndash;    <h2 style="margin-left:36%;font-family:'方正静蕾简体';font-size:40px">疫情防控人员添加信息</h2>&ndash;&gt;-->
<!--    <div class="container">-->
<!--      <el-form-->
<!--          ref="etoak"-->
<!--          :model="ruleForm"-->
<!--          label-width="80p"-->
<!--          :rules="rule"-->
<!--          :label-position="poistion"-->
<!--      >-->
<!--        <el-form-item label="姓名" prop="name">-->
<!--          <el-input v-model="ruleForm.name"></el-input>-->
<!--        </el-form-item>-->
<!--        &lt;!&ndash; 身份证号 校验 &ndash;&gt;-->
<!--        <el-form-item label="身份证号" prop="idNum">-->
<!--          <el-input v-model="ruleForm.idNum"></el-input>-->
<!--        </el-form-item>-->
<!--        &lt;!&ndash; 需要校验 &ndash;&gt;-->
<!--        <el-form-item label="手机号" prop="phone">-->
<!--          <el-input v-model="ruleForm.phone"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="身体状况" required>-->
<!--          <el-select v-model="ruleForm.value" placeholder="请选择">-->
<!--            <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="体温" prop="temperature">-->
<!--          <el-input v-model="ruleForm.temperature"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否为境外流入" required="">-->
<!--          <el-radio v-model="ruleForm.radio" label="1">是</el-radio>-->
<!--          <el-radio v-model="ruleForm.radio" label="0">否</el-radio>-->
<!--        </el-form-item>-->
<!--        <el-form-item-->
<!--            label="外地流入地区"-->
<!--            v-if="ruleForm.radio === '1'"-->
<!--            required-->
<!--        >-->
<!--          &lt;!&ndash; 级联 选择器&ndash;&gt;-->
<!--          <el-select-->
<!--              v-model="provice"-->
<!--              placeholder="请选择省份"-->
<!--              @change="searchCity(provice)"-->
<!--              ref="proviceName"-->
<!--          >-->
<!--            <el-option-->
<!--                v-for="provice in provices"-->
<!--                :key="provice.id"-->
<!--                :label="provice.name"-->
<!--                :value="provice.id"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--          <el-select-->
<!--              v-model="city"-->
<!--              placeholder="请选择城市"-->
<!--              @change="searchArea(city)"-->
<!--          >-->
<!--            <el-option-->
<!--                v-for="city in cities"-->
<!--                :key="city.id"-->
<!--                :label="city.name"-->
<!--                :value="city.id"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--          <el-select v-model="area" placeholder="请选择区" @change="load(area)">-->
<!--            <el-option-->
<!--                v-for="area in areas"-->
<!--                :key="area.id"-->
<!--                :label="area.name"-->
<!--                :value="area.id"-->
<!--            >-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所在地住址" prop="address">-->
<!--          <el-input v-model="ruleForm.address"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="返回时间" prop="time">-->
<!--          <el-date-picker-->
<!--              v-model="ruleForm.time"-->
<!--              type="date"-->
<!--              placeholder="选择日期"-->
<!--          >-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--&lt;!&ndash;        <el-form-item label="上传头像" prop="paths">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-upload&ndash;&gt;-->
<!--&lt;!&ndash;              list-type="picture-card"&ndash;&gt;-->
<!--&lt;!&ndash;              class="avatar-uploader"&ndash;&gt;-->
<!--&lt;!&ndash;              action="http://42.192.3.100:9527/sysFile/fileUpload"&ndash;&gt;-->
<!--&lt;!&ndash;              :before-upload="beforeUpload"&ndash;&gt;-->
<!--&lt;!&ndash;              :on-success="success"&ndash;&gt;-->
<!--&lt;!&ndash;              :on-remove="del"&ndash;&gt;-->
<!--&lt;!&ndash;              :limit="1"&ndash;&gt;-->
<!--&lt;!&ndash;              :show-file-list="true"&ndash;&gt;-->
<!--&lt;!&ndash;              :on-exceed="message"&ndash;&gt;-->
<!--&lt;!&ndash;              :on-preview="show"&ndash;&gt;-->

<!--&lt;!&ndash;          >&ndash;&gt;-->
<!--&lt;!&ndash;            <i class="el-icon-plus"></i>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-upload>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-dialog :visible.sync="dialogVisible">&ndash;&gt;-->
<!--&lt;!&ndash;            <img width="100%" :src="imageUrl" alt=""/>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-dialog>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--        <el-form-item>-->
<!--          <el-button type="primary"  @click="onSubmit('etoak')">添加</el-button>-->
<!--          <el-button type="danger" @click="resetForm('etoak')">重置</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import AppHeader from "@/components/AppHeader.vue";-->
<!--// import { search } from "../api/cascCade";-->
<!--// import { ADD, ADDALL } from "../api/add";-->

<!--export default {-->
<!--  components: {-->
<!--    AppHeader,-->
<!--  },-->
<!--  data() {-->
<!--    let checkIdNum = (rule, value, callback) => {-->
<!--      if (!value) {-->
<!--        callback(new Error("请填写身份证号"));-->
<!--      } else if (!(this.isIdNum(value) && value.length == 18)) {-->
<!--        //引入methods中封装的检查手机格式的方法-->
<!--        callback(new Error("请输入有效格式身份证号!"));-->
<!--      } else {-->
<!--        callback();-->
<!--      }-->
<!--    };-->
<!--    let checkPhone = (rule, value, callback) => {-->
<!--      if (!value) {-->
<!--        callback(new Error("请输入有效手机号!"));-->
<!--      } else if (!(this.isNumber(value) && value.length == 11)) {-->
<!--        //引入methods中封装的检查手机格式的方法-->
<!--        callback(new Error("请输入有效格式手机号码!"));-->
<!--      } else {-->
<!--        callback();-->
<!--      }-->
<!--    };-->
<!--    let checkTempreature = (rule, value, callback) => {-->
<!--      if (!value) {-->
<!--        callback(new Error("请输入有效体温!"));-->
<!--      } else if (!this.isTempreature(value) || value < 36.4) {-->
<!--        //引入methods中封装的检查手机格式的方法-->
<!--        callback(new Error("请输入有效有效体温!"));-->
<!--      } else {-->
<!--        callback();-->
<!--      }-->
<!--    };-->
<!--    return {-->
<!--      poistion: 'left',-->
<!--      provice: "",-->
<!--      city: "",-->
<!--      area: "",-->
<!--      proviceName: "",-->
<!--      cityName: "",-->
<!--      areaName: "",-->
<!--      areas: [],-->
<!--      cities: [],-->
<!--      provices: [],-->
<!--      imageUrl: "",-->
<!--      dialogVisible: false,-->
<!--      ruleForm: {-->
<!--        address: "" /* 具体地址 */,-->
<!--        name: "",-->
<!--        idNum: "",-->
<!--        value: "" /* 身体状况 下拉框 */,-->
<!--        temperature: "",-->
<!--        radio: "0",-->
<!--        time: "",-->
<!--        path: "",-->
<!--        proviceName: "",-->
<!--        cityName: "",-->
<!--        areaName: "",-->
<!--      },-->
<!--      rule: {-->
<!--        idNum: [-->
<!--          {-->
<!--            required: true,-->
<!--            message: "请填写有效身份证号",-->
<!--            validator: checkIdNum,-->
<!--            trigger: "blur",-->
<!--          },-->
<!--        ],-->
<!--        phone: [-->
<!--          {-->
<!--            required: true,-->
<!--            message: "请填写有效手机号",-->
<!--            validator: checkPhone,-->
<!--            trigger: "blur",-->
<!--          },-->
<!--        ],-->
<!--        /* 保留一位小数 */-->
<!--        temperature: [-->
<!--          {-->
<!--            required: true,-->
<!--            message: "请填写正确的体温",-->
<!--            validator: checkTempreature,-->
<!--            trigger: "blur",-->
<!--          },-->
<!--        ],-->
<!--        address: [-->
<!--          {-->
<!--            max: 20,-->
<!--            message: "最多20个字符",-->
<!--            trigger: "blur",-->
<!--          },-->
<!--        ],-->
<!--      },-->
<!--      options: [-->
<!--        {-->
<!--          value: "正常",-->
<!--          label: "正常",-->
<!--        },-->
<!--        {-->
<!--          value: "普通感冒",-->
<!--          label: "普通感冒",-->
<!--        },-->
<!--        {-->
<!--          value: "呼吸困难腹泻",-->
<!--          label: "呼吸困难腹泻",-->
<!--        },-->
<!--      ],-->
<!--    };-->
<!--  },-->
<!--  methods: {-->
<!--    onSubmit(FormName) {-->
<!--      const strtime = this.getDate(this.ruleForm.time)-->
<!--      if (!this.ruleForm.path) {-->
<!--        this.$message({-->
<!--          message: "请上传头像",-->
<!--          type: "error",-->
<!--        });-->
<!--        return;-->
<!--      }-->
<!--      this.$refs[FormName].validate((valid) => {-->
<!--        // if (valid) {-->
<!--        //   if (this.ruleForm.radio === "0") {-->
<!--        //     ADD(-->
<!--        //       this.ruleForm.name,-->
<!--        //       this.ruleForm.idNum,-->
<!--        //       this.ruleForm.phone,-->
<!--        //       this.ruleForm.value,-->
<!--        //       this.ruleForm.temperature,-->
<!--        //       this.ruleForm.radio,-->
<!--        //       strtime,-->
<!--        //       this.ruleForm.address,-->
<!--        //       this.ruleForm.path-->
<!--        //     ).then((response) => {-->
<!--        //       console.log(response.data)-->
<!--        //       if (response.data.flag) {-->
<!--        //         this.$message({-->
<!--        //           message: "添加成功",-->
<!--        //           type: "success",-->
<!--        //         });-->
<!--        //         this.$router.push("/index");-->
<!--        //       }-->
<!--        //     });-->
<!--        //   } else {-->
<!--        //     ADDALL(-->
<!--        //       this.ruleForm.name,-->
<!--        //       this.ruleForm.idNum,-->
<!--        //       this.ruleForm.phone,-->
<!--        //       this.ruleForm.value,-->
<!--        //       this.ruleForm.temperature,-->
<!--        //       this.ruleForm.radio,-->
<!--        //       this.ruleForm.proviceName,-->
<!--        //       this.ruleForm.cityName,-->
<!--        //       this.ruleForm.areaName,-->
<!--        //       strtime,-->
<!--        //       this.ruleForm.address,-->
<!--        //       this.ruleForm.path-->
<!--        //     ).then((response) => {-->
<!--        //       if (response.data.flag) {-->
<!--        //         this.$message({-->
<!--        //           message: "添加成功",-->
<!--        //           type: "success",-->
<!--        //         });-->
<!--        //         this.$router.push("/index");-->
<!--        //       }-->
<!--        //     });-->
<!--        //   }-->
<!--        // } else {-->
<!--        //   alert("有表单项未填");-->
<!--        // }-->
<!--      });-->
<!--    },-->
<!--    getDate(date) {-->
<!--      var year = date.getFullYear();-->
<!--      var month = (date.getMonth() + 1).toString();-->
<!--      var day = (date.getDate()).toString();-->
<!--      if (month.length == 1) {-->
<!--        month = "0" + month;-->
<!--      }-->
<!--      if (day.length == 1) {-->
<!--        day = "0" + day;-->
<!--      }-->
<!--      var dateTime = year + "-" + month + "-" + day;-->
<!--      return dateTime;-->
<!--    },-->
<!--    /* 身份证号码检测 */-->
<!--    isIdNum(value) {-->
<!--      if (-->
<!--          !/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(-->
<!--              value-->
<!--          )-->
<!--      ) {-->
<!--        return false;-->
<!--      } else {-->
<!--        return true;-->
<!--      }-->
<!--    },-->
<!--    /* 手机号检测 */-->
<!--    isNumber(phone) {-->
<!--      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(phone)) {-->
<!--        return false;-->
<!--      } else {-->
<!--        return true;-->
<!--      }-->
<!--    },-->
<!--    isTempreature(value) {-->
<!--      if (!/^\d+(\.\d{0,1})?$/.test(value)) {-->
<!--        return false;-->
<!--      } else {-->
<!--        return true;-->
<!--      }-->
<!--    },-->
<!--    resetForm(FormName) {-->
<!--      this.$refs[FormName].resetFields();-->
<!--    },-->
<!--    load(id) {-->
<!--      const areaItem = this.areas.find((item) => {-->
<!--        return item.id === id;-->
<!--      });-->
<!--      this.ruleForm.areaName = areaItem.name;-->
<!--      //console.log(this.proviceName,this.cityName,this.areaName)-->
<!--    },-->
<!--    searchArea(id) {-->
<!--      this.areas = null;-->
<!--      this.area = null;-->
<!--      this.cityName = "";-->
<!--      // search(id).then((response) => {-->
<!--      //   this.areas = response.data.data;-->
<!--      // });-->
<!--      const cityItem = this.cities.find((item) => {-->
<!--        return item.id === id;-->
<!--      });-->
<!--      this.ruleForm.cityName = cityItem.name;-->
<!--    },-->
<!--    searchCity(id) {-->
<!--      this.cities = null;-->
<!--      this.areas = null;-->
<!--      this.city = null;-->
<!--      this.area = null;-->
<!--      this.proviceName = "";-->
<!--      // search(id).then((response) => {-->
<!--      //   console.log(response.data);-->
<!--      //   this.cities = response.data.data;-->
<!--      //   console.log(this.cities);-->
<!--      // });-->
<!--      const proviceItem = this.provices.find((item) => {-->
<!--        return item.id === id;-->
<!--      });-->
<!--      this.ruleForm.proviceName = proviceItem.name;-->
<!--    },-->
<!--    /* 上传头像 */-->
<!--    beforeUpload(file) {-->
<!--      const isJPG = file.type === "image/jpeg";-->
<!--      const isLt2M = file.size / 1024 / 1024 < 2;-->

<!--      if (!isJPG) {-->
<!--        this.$message.error("上传头像图片只能是 JPG 格式!");-->
<!--      }-->
<!--      if (!isLt2M) {-->
<!--        this.$message.error("上传头像图片大小不能超过 2MB!");-->
<!--      }-->
<!--      return isJPG && isLt2M;-->
<!--    },-->
<!--    success(response, file, fileList) {-->
<!--      this.ruleForm.path = response.data.path;-->

<!--    },-->
<!--    del(file, fileList) {-->
<!--      //console.log(file, fileList);-->
<!--      this.ruleForm.path = "";-->
<!--    },-->
<!--    message(file, fileList) {-->
<!--      this.$message({-->
<!--        message: "一张图就可以",-->
<!--        type: "error",-->
<!--      });-->
<!--    },-->
<!--    show(file) {-->
<!--      this.imageUrl = file.url;-->
<!--      this.dialogVisible = true;-->
<!--    },-->
<!--  },-->
<!--  created() {-->
<!--    // search(0).then((response) => {-->
<!--    //   if (response.data.flag) {-->
<!--    //     console.log(response.data);-->
<!--    //     this.provices = response.data.data;-->
<!--    //   }-->
<!--    // });-->
<!--  },-->
<!--};-->
<!--</script>-->

